<template>
    <view class="aa">
        <img src="/static/img/13.png" alt="" class="two_img">
        <u-popup mode="right" :show="show" @close="close" @open="open">

            <view class="shuju">
                <view class="shai"> 数据筛选<span @click="close">X</span> </view>

                <view class="time">时间</view>
                <view class="btn">
                    <view class="a" :class="{ active: currentTab === 0 }" @click="switchTab(0)" data-tab="0">今年</view>
                    <view class="a" :class="{ active: currentTab === 1 }" @click="switchTab(1)" data-tab="1">本季度</view>
                    <view class="a" :class="{ active: currentTab === 2 }" @click="switchTab(2)" data-tab="2">上季度</view>
                    <view class="a" :class="{ active: currentTab === 3 }" @click="switchTab(3)" data-tab="3">本月</view>
                    <view class="a" :class="{ active: currentTab === 4 }" @click="switchTab(4)" data-tab="4">上月</view>
                    <view class="a" :class="{ active: currentTab === 5 }" @click="switchTab(5)" data-tab="5">本周</view>
                    <view class="a" :class="{ active: currentTab === 6 }" @click="switchTab(6)" data-tab="6">上周</view>
                    <view class="a" :class="{ active: currentTab === 7 }" @click="switchTab(7)" data-tab="7">昨天</view>
                    <view class="a" :class="{ active: currentTab === 8 }" @click="switchTab(8)" data-tab="8">今天</view>
                </view>
                <view class="zi">
                    自定义时间段
                </view>
                <view>
                    <view class="xuan"> <img src="/static/img/shijian.png" alt=""
                            style="width: 20px; height: 20px; vertical-align: middle;"> <span @click="time">选择时间范围</span>
                    </view>
                </view>

            </view>
            <view class="sure">

                <button style="color: blue;" @click="close">重置</button>
                <button style="color: white; background-color: blue;" @click="close">确定</button>
            </view>
        </u-popup>

        <span @click="show = true" style="color: rgb(5, 123, 254);">筛选</span>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

const currentTab = ref(0)
const switchTab = (tab: number) => {
    currentTab.value = tab;
};
const show = ref(false);
const open = () => {
    show.value = true
}
const close = () => {
    show.value = false
}

const time = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshezhi/qiaotime'
    })
}
</script>

<style lang="scss">
.sure {
    display: flex;
}

button {
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    border: 1px solid #ccc;
    margin-left: 20px;
    margin-top: 20px;

}

.zi {
    margin-left: 20px;
    margin-top: 20px;
}

.xuan {
    color: #666;
    border: 1px solid #ccc;
    height: 40px;
    line-height: 40px;
}

.btn {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
}

.a {
    width: 80px;
    text-align: center;
    border: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
    margin-left: 10px;
}

.active {
    border: 1px solid blue;
    color: blue;
}

.time {
    padding: 20px 20px;
    color: #666;
}

.zi {
    padding: 20px 20px;
    color: #666;
}

.aa {
    display: flex;
}

.shuju {
    width: 300px;
    height: 100%;
    border: 1px solid #ccc;
}

.shai {
    margin-top: 40px;
    border: 1px solid #ccc;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
}


.two_img {
    width: 20px;
    height: 23px;
    vertical-align: middle;
}
</style>